import React,{ useEffect, useRef, useState } from "react";
import header_img_left from "../../assets/images/header_img_left.gif";
import header_img_right_top from "../../assets/images/header_img_right_top.gif";
import header_img_right_bottom from "../../assets/images/header_img_right_bottom.gif";
import header_images_left from "../../assets/images/header_images_left.gif";
import header_images_right_top2 from "../../assets/images/header_images_right_top2.gif";
import header_images_right_bottom2 from "../../assets/images/header_images_right_bottom2.gif";
import header_images_right_top3 from "../../assets/images/header_images_right_top3.gif";
import header_images_right_bottom3 from "../../assets/images/header_images_right_bottom3.gif";
import image1 from '../../assets/images/image1.png';
import image2 from "../../assets/images/image2.png";
import image3 from "../../assets/images/image3.png";
import image4 from "../../assets/images/image4.png";
import image5 from "../../assets/images/image5.png";
import image6 from "../../assets/images/image6.png";
import image7 from "../../assets/images/image7.png";
import image8 from "../../assets/images/image8.png";
import image9 from "../../assets/images/image9.png";
import image10 from "../../assets/images/image10.png";
import image11 from "../../assets/images/image11.png";
import image12 from "../../assets/images/image12.png";
import image13 from "../../assets/images/image13.png";
import image14 from "../../assets/images/image14.png";
import image15 from "../../assets/images/image15.png";
import image16 from "../../assets/images/image16.png";
import image17 from "../../assets/images/image17.png";
import image18 from "../../assets/images/image18.png";
import image19 from "../../assets/images/image19.png";
import image20 from "../../assets/images/image20.png";
import image21 from "../../assets/images/image21.png";
import image22 from "../../assets/images/image22.png";
import image23 from "../../assets/images/image23.png";

import { CaretRightFilled } from "@ant-design/icons";
import "./index.scss";
import { Card } from "antd";
import MaterTitle from "../../components/component/materTitle";
import Hots from "../../components/component/hot";
import Calendar from "../../components/component/calendar";
import Design from "../../components/component/design";
import Subject from "../../components/component/subject";
import RefBottom from "../../components/component/refBottom";
import TopUp from '../../components/component/topUp/index.tsx'
const Index:React.FC = () => {
  const videoRef = useRef(null);
  const videoRefs = useRef(null);
  const [showPlayIcon, setShowPlayIcon] = useState("block");
  const [showPlayIcons, setShowPlayIcons] = useState("block");

  const handleMouseEnter = () => {
    setShowPlayIcon("none");
    if (videoRef.current) {
      (videoRef.current as HTMLVideoElement).play();
    }
  };

  const handleMouseLeave = () => {
    setShowPlayIcon("block");
    if (videoRef.current) {
      (videoRef.current as HTMLVideoElement).pause();
    }
  };
  const handleMouseEnters = () => {
    setShowPlayIcons("none");
    if (videoRefs.current) {
      (videoRefs.current as HTMLVideoElement).play();
    }
  };

  const handleMouseLeaves = () => {
    setShowPlayIcons("block");
    if (videoRefs.current) {
      (videoRefs.current as HTMLVideoElement).pause();
    }
  };
  const [imgs, setImgs] = useState([
    {
      name: "夏日新国风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/63fa95528feb4848b8ea587db1e1b522/1723805651062.png?x-oss-process=image/format,webp",
      imgBgColor: "#E2F2E7",
      textColor: "#EBEEEB",
    },
    {
      name: "孟菲斯风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/7847d84189ac470795e8446a77a7d31c/1723805803707.png?x-oss-process=image/format,webp",
      imgBgColor: "#F6E1D7",
      textColor: "#F2ECE9",
    },
    {
      name: "毛玻璃风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/d1c8f17a5bbf4e0ebca9e1f01c0842a2/1723805913052.png?x-oss-process=image/format,webp",
      imgBgColor: "#FAF1E0",
      textColor: "#EEEBE7",
    },
    {
      name: "手绘风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/15bbda54cb66442ca4658344db42077b/1723805956171.png?x-oss-process=image/format,webp",
      imgBgColor: "#E2F2E7",
      textColor: "#EDF1EE",
    },
    {
      name: "中式美学",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/39210a021cc84a1ea9140cb83b5e7de1/1724382540891.jpg?x-oss-process=image/format,webp",
      imgBgColor: "#F1F2F4",
      textColor: "#F0F0F1",
    },
    {
      name: "柔和桃风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/cdf9311a081a4cff9098338dde489d13/1723806057550.png?x-oss-process=image/format,webp",
      imgBgColor: "#F6E5E4",
      textColor: "#F2EDEC",
    },
    {
      name: "国潮风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/7cce146d7cea437a83e9833ec41222ff/1723809007486.jpg?x-oss-process=image/format,webp",
      imgBgColor: "#F1F8F7",
      textColor: "#F1F3F3",
    },
    {
      name: "漫画风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/9a24f2b7bdb44d1f9fa5b74f26854cb9/1723806162755.png?x-oss-process=image/format,webp",
      imgBgColor: "#DBD4F5",
      textColor: "#E8E6EE",
    },
    {
      name: "酸性风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/56983ac3426e401c865e74f3868a9e5b/1723806212526.png?x-oss-process=image/format,webp",
      imgBgColor: "#ECD1FC",
      textColor: "#EBE0F2",
    },
    {
      name: "毛绒风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/7a83346971c746f39c412b6f51c8a7c4/1723806243846.png?x-oss-process=image/format,webp",
      imgBgColor: "#F1DCDB",
      textColor: "#F1EBEB",
    },
    {
      name: "3D风",
      imgs: "https://gaoding-market.dancf.com/market-operations/market/side/51293d78a0134e3b82b41e8bf67fcba9/1723806272033.png?x-oss-process=image/format,webp",
      imgBgColor: "#FBF3F1",
      textColor: "#F4F1F1",
    },
  ]);
  const [subjects, setSubjects] = useState([
    {
      name: "中秋海报",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/c4061676eb3d481b90217eb5aa84bcc0/1725959221096.jpg?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋放假通知",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/ca993f5035f246fe896b154183755805/1725959633060.jpg?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋背景",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/5262996f31474475b0a9456cf8fc1499/1725959679482.jpg?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋元素",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/49098867f8c24065ae971bdbf2bf49b3/1725959778682.jpg?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋活动海报",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/9894afb7bb2e460f8538e8ac1a3f5126/1725961457663.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋字体",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/fb0d091fa36b4b8a81074f03464a4854/1725960469646.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋兔子元素",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/90ea49f25c014a6e82cfe4c864a53186/1725960501423.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋月亮元素",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/b000be33c47f4faa83f59e87be2556ba/1725961196353.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋月饼元素",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/9237398ce44e4d6fa708b1a7d6919e7a/1725961319529.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋邀请函",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/11e6b3b6b5c548068cf259b74a386ec9/1725961400700.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
    {
      name: "中秋长图",
      images:
        "https://gaoding-market.dancf.com/market-operations/market/side/1589acb961f44dec949af1a89bb04e1b/1725961516554.png?x-oss-process=image/resize,w_166,type_6/interlace,1/format,webp",
    },
  ]);

  // 滚动事件

  const [scrolls, setScrolls] = useState("none");
  const scrollheader = useRef<HTMLDivElement>(null);
  const scrollheaderHot = useRef<HTMLDivElement>(null);
  const materTitle = useRef<HTMLDivElement>(null);
  const subject = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setImgs(imgs);
    setSubjects(subjects);
    setScrolls(scrolls);
  }, [imgs, subjects, scrolls]);
  // 点击置顶
   const topClickScroll = useRef<HTMLDivElement>(null);
  return (
    <div className="boxs" style={{ position: "relative", top: 0, left: 0 }}>
      <div
        ref={topClickScroll}
        style={{
          overflowY: "scroll",
          // width: "calc(100vw - 200px)",
          width:'100%',
          height: "100% ",

          position: "absolute",
          top: 0,
          left: 0,
        }}
      >
        <div
          className="headers"
          style={{ width: "100%", minHeight: 400, position: "relative" }}
        >
          <div
            ref={scrollheader}
            className="headers_card"
            style={{
              display: "flex",
              overflowX: "scroll",
              position: "relative",
              top: 0,
              width: "200%",
            }}
          >
            <Card
              size="small"
              title={<div style={{ marginTop: "10px" }}>平面模版</div>}
              extra={
                <a style={{ marginTop: "15px", display: "block" }} href="#">
                  更多&gt;
                </a>
              }
              style={{
                width: 477,
                height: 380,
                background: "#f6f7f9",
              }}
              bordered={false}
              headStyle={{ fontSize: "20px" }}
            >
              <div className="imgs">
                <div className="header_imgs_left">
                  <img src={header_img_left} alt="" />
                </div>
                <div className="header_imgs_right">
                  <div className="header_imgs_right_top">
                    <img src={header_img_right_top} alt="" />
                  </div>
                  <div className="header_imgs_right_bottom">
                    <img src={header_img_right_bottom} alt="" />
                  </div>
                </div>
              </div>
            </Card>

            <Card
              size="small"
              title={<div style={{ marginTop: "10px" }}>PPT</div>}
              extra={
                <a style={{ marginTop: "15px", display: "block" }} href="#">
                  更多&gt;
                </a>
              }
              style={{
                width: 477,
                height: 380,
                marginLeft: 30,
                background: "#f6f7f9",
              }}
              bordered={false}
              headStyle={{ fontSize: "20px" }}
            >
              <div className="imgs">
                <div className="header_imgs_left">
                  <img src={header_images_left} alt="" />
                </div>
                <div className="header_imgs_right">
                  <div className="header_imgs_right_top">
                    <img src={header_images_right_top2} alt="" />
                  </div>
                  <div className="header_imgs_right_bottom">
                    <img src={header_images_right_bottom2} alt="" />
                  </div>
                </div>
              </div>
            </Card>
            <Card
              size="small"
              title={<div style={{ marginTop: "10px" }}>电商系列</div>}
              extra={
                <a style={{ marginTop: "15px", display: "block" }} href="#">
                  更多&gt;
                </a>
              }
              style={{
                width: 225,
                height: 380,
                marginLeft: 30,
                background: "#f6f7f9",
              }}
              bordered={false}
              headStyle={{ fontSize: "20px" }}
            >
              <div className="images">
                <div className="header_images_right_top">
                  <img src={header_images_right_top3} alt="" />
                </div>
                <div className="header_images_right_bottom">
                  <img src={header_images_right_bottom3} alt="" />
                </div>
              </div>
            </Card>
            <div>
              <Card
                size="small"
                title={<div style={{ marginTop: "10px" }}>小红书</div>}
                extra={
                  <a style={{ marginTop: "15px", display: "block" }} href="#">
                    更多&gt;
                  </a>
                }
                style={{
                  width: 225,
                  height: 180,
                  marginLeft: 30,
                  background: "#f6f7f9",
                  marginBottom: 20,
                }}
                bordered={false}
                headStyle={{ fontSize: "20px" }}
              >
                <div className="header_images_one">
                  <img src={image1} alt="" />
                </div>
              </Card>
              <Card
                size="small"
                title={<div style={{ marginTop: "10px" }}>免抠元素</div>}
                extra={
                  <a style={{ marginTop: "15px", display: "block" }} href="#">
                    更多&gt;
                  </a>
                }
                style={{
                  width: 225,
                  height: 180,
                  marginLeft: 30,
                  background: "#f6f7f9",
                }}
                bordered={false}
                headStyle={{ fontSize: "20px" }}
              >
                <div className="header_images_one">
                  <img src={image2} alt="" />
                </div>
              </Card>
            </div>
            <div>
              <Card
                size="small"
                title={<div style={{ marginTop: "10px" }}>高清视频</div>}
                extra={
                  <a style={{ marginTop: "15px", display: "block" }} href="#">
                    更多&gt;
                  </a>
                }
                style={{
                  width: 225,
                  height: 180,
                  marginLeft: 30,
                  background: "#f6f7f9",
                  position: "relative",
                  marginBottom: 20,
                }}
                bordered={false}
                headStyle={{ fontSize: "20px" }}
              >
                <div
                  style={{
                    width: 205,
                    height: 105,
                    overflow: "hidden",
                    borderRadius: 8,
                    marginTop: 10,
                  }}
                >
                  <video
                    style={{
                      width: 235,
                      height: 115,
                      marginLeft: -15,
                    }}
                    src="https://gaoding-market.dancf.com/market-operations/market/side/ef7b9ac4e65d4129b608d7adf11a8a9f/1721301285163.mp4"
                    controls={false}
                    ref={videoRef}
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                    muted
                    loop
                  />
                </div>

                <div
                  style={{
                    display: showPlayIcon,
                    position: "absolute",
                    top: "65%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    fontSize: "24px",
                    color: "#ffffff",
                    cursor: "pointer",
                  }}
                >
                  <CaretRightFilled
                    style={{
                      background: "rgba(0,0,0,.5)",
                      borderRadius: "50%",
                      padding: 6,
                    }}
                  />
                </div>
              </Card>
              <Card
                size="small"
                title={<div style={{ marginTop: "10px" }}>视频模版</div>}
                extra={
                  <a style={{ marginTop: "15px", display: "block" }} href="#">
                    更多&gt;
                  </a>
                }
                style={{
                  width: 225,
                  height: 180,
                  marginLeft: 30,
                  background: "#f6f7f9",
                  position: "relative",
                }}
                bordered={false}
                headStyle={{ fontSize: "20px" }}
              >
                <div
                  style={{
                    width: 205,
                    height: 110,
                    overflow: "hidden",
                    marginLeft: -2,
                    borderRadius: 8,
                    marginTop: 10,
                  }}
                >
                  <video
                    style={{
                      width: 235,
                      height: 365,
                      marginLeft: -15,
                      marginTop: -130,
                    }}
                    src="https://gaoding-market.dancf.com/market-operations/market/side/3293715e4b6d4b51b62fc86adfdbed36/1721302618605.mp4"
                    controls={false}
                    ref={videoRefs}
                    onMouseEnter={handleMouseEnters}
                    onMouseLeave={handleMouseLeaves}
                    muted
                    loop
                  />
                </div>

                <div
                  style={{
                    display: showPlayIcons,
                    position: "absolute",
                    top: "65%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    fontSize: "24px",
                    color: "#ffffff",
                    cursor: "pointer",
                  }}
                >
                  <CaretRightFilled
                    style={{
                      background: "rgba(0,0,0,.5)",
                      borderRadius: "50%",
                      padding: 6,
                    }}
                  />
                </div>
              </Card>
            </div>
          </div>
          <RefBottom refs={scrollheader}></RefBottom>
        </div>
        <div className="hot">
          <MaterTitle name="热搜推荐"></MaterTitle>
          <div style={{ position: "relative" }}>
            <div
              ref={scrollheaderHot}
              style={{
                display: "flex",
                paddingTop: 10,
                width: "100%",
                overflowX: "scroll",
              }}
            >
              <Hots
                name={"喜报"}
                describe={"大气喜庆感模版合集"}
                imgs={image3}
                colors={"linear-gradient(to top, #FDF9F3, #F5E5CF)"}
              ></Hots>
              <Hots
                name={"邀请函"}
                describe={"商务婚礼年会庆典等各主题邀请函"}
                imgs={image4}
                colors={"linear-gradient(to top, #FDF8F5, #F7E2D8)"}
              ></Hots>
              <Hots
                name={"早安"}
                describe={"晨光微露，早安问候"}
                imgs={image5}
                colors={"linear-gradient(to top,#FEFBF6, #FAF2E2)"}
              ></Hots>
              <Hots
                name={"植物花卉元素"}
                describe={"自然之美，触手可及"}
                imgs={image6}
                colors={"linear-gradient(to top, #F6FBF8, #E3F2E6)"}
              ></Hots>
              <Hots
                name={"表格"}
                describe={"价格表课程表计划表值日表等"}
                imgs={image7}
                colors={"linear-gradient(to top, #FDF7F4, #F7E3D9)"}
              ></Hots>
              <Hots
                name={"海报"}
                describe={"10w+质感海报等你来撩"}
                imgs={image8}
                colors={"linear-gradient(to top, #F7F5FD, #DCD5F6)"}
              ></Hots>
              <Hots
                name={"壁纸"}
                describe={"风景动漫美女打工人插画壁纸"}
                imgs={image9}
                colors={"linear-gradient(to top, #FDFBF5, #FAF2E2)"}
              ></Hots>
              <Hots
                name={"秋季素材"}
                describe={"金秋创意写实质感素材大放送"}
                imgs={image10}
                colors={"linear-gradient(to top, #FAF6F0, #F5E5CE)"}
              ></Hots>
            </div>
            <RefBottom refs={scrollheaderHot}></RefBottom>
          </div>
        </div>
        <div className="calendar">
          <MaterTitle name="热点日历"></MaterTitle>
          <div style={{ display: "flex", width: "100%", overflowX: "scroll" }}>
            <div>
              <Calendar
                name={"中秋"}
                timesay={"09.17 周二"}
                describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                imgs={image11}
                widths={473}
                height={172}
                bgcolors={"#F7F1E9"}
                colors={"#B87C2A"}
              ></Calendar>
            </div>
            <div
              style={{
                height: 172,
                width: "100%",
                display: "flex",
                // justifyContent: 'space-between',
                flexWrap: "wrap",
                overflow: "hidden",
              }}
            >
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"国庆节"}
                  timesay={"10.01——10.07"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image12}
                  widths={220}
                  height={80}
                  bgcolors={"#F7E1E0"}
                  colors={"#C9372F"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"秋招"}
                  timesay={"09.01——09.15"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image13}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"全国爱牙日"}
                  timesay={"09.20 周五"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image14}
                  widths={220}
                  height={80}
                  bgcolors={"#EBEFFB"}
                  colors={"#3F60DD"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"中国农民丰收节"}
                  timesay={"09.22 周日"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image15}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"秋分"}
                  timesay={"09.22 周日"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image16}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"世界旅游日"}
                  timesay={"09.17 周二"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image17}
                  widths={220}
                  height={80}
                  bgcolors={"#EBEFFB"}
                  colors={"#3F60DD"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"寒霜"}
                  timesay={"10.08 周二"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image18}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"重阳节"}
                  timesay={"10.11 周五"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image19}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"霜降"}
                  timesay={"10.23 周三"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image20}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"程序员节"}
                  timesay={"10.24 周四"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image21}
                  widths={220}
                  height={80}
                  bgcolors={"#EBEFFB"}
                  colors={"#3F60DD"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"万圣节"}
                  timesay={"10.31——11.01"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image22}
                  widths={220}
                  height={80}
                  bgcolors={"#F7F1E9"}
                  colors={"#B87C2A"}
                ></Calendar>
              </div>
              <div style={{ marginLeft: 25, marginBottom: 14 }}>
                <Calendar
                  name={"中秋"}
                  timesay={"09.17 周二"}
                  describe={["中秋小红书配图", "中秋公众号", "中秋海报"]}
                  imgs={image23}
                  widths={220}
                  height={80}
                  bgcolors={"#E0DCE9"}
                  colors={"#2D166E"}
                ></Calendar>
              </div>
            </div>
          </div>
        </div>
        <div>
          <MaterTitle name="设计趋势"></MaterTitle>
          <div style={{ position: "relative" }}>
            <div
              ref={materTitle}
              style={{
                height: 300,
                display: "flex",
                width: "100%",
                overflowX: "scroll",
              }}
            >
              {imgs.map((item, index) => {
                return (
                  <Design
                    key={index}
                    name={item.name}
                    imgBgColor={item.imgBgColor}
                    imgs={item.imgs}
                    textColor={item.textColor}
                  ></Design>
                );
              })}
            </div>
            <RefBottom refs={materTitle}></RefBottom>
          </div>
        </div>
        <div>
          <MaterTitle name="中秋专题"></MaterTitle>
          <div style={{ position: "relative" }}>
            <div
              ref={subject}
              style={{ display: "flex", width: "100%", overflowX: "scroll" }}
            >
              {subjects.map((item, index) => {
                return (
                  <Subject
                    key={index}
                    name={item.name}
                    images={item.images}
                  ></Subject>
                );
              })}
            </div>
            <RefBottom refs={subject}></RefBottom>
          </div>
        </div>
        <div>
          <MaterTitle name="中秋专题"></MaterTitle>
          <div style={{ display: "flex", width: "100%", overflowX: "scroll" }}>
            {subjects.map((item, index) => {
              return (
                <Subject
                  key={index}
                  name={item.name}
                  images={item.images}
                ></Subject>
              );
            })}
          </div>
        </div>
        <div>
          <MaterTitle name="中秋专题"></MaterTitle>
          <div style={{ display: "flex", width: "100%", overflowX: "scroll" }}>
            {subjects.map((item, index) => {
              return (
                <Subject
                  key={index}
                  name={item.name}
                  images={item.images}
                ></Subject>
              );
            })}
          </div>
        </div>
      </div>
      <div className="scrollTopbottom">
       <TopUp refs={topClickScroll}></TopUp>
      </div>
      
    </div>
  )
}

export default Index